---
const features = [
  {
    title: "规范的代码风格",
    description: "代码规范易读，注释清晰，方便维护。采用主流的技术，不做任何多余的封装。",
    icon: "M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4v-2zm7-1.5V16h-4v2h4v2.5l3.5-3.5L17 13.5z",
    color: "primary"
  },
  {
    title: "丰富的单元测试",
    description: "严谨的单元测试，确保代码的可靠性。",
    icon: "M17 3.34a10 10 0 1 1-14.995 8.984L2 12l.005-.324A10 10 0 0 1 17 3.34zM7.613 9.21l-.094.083-2 2a1 1 0 0 0 1.32 1.497l.094-.083L9 11.415l2.793 2.792a1 1 0 0 0 1.32.083l.094-.083a1 1 0 0 0 .083-1.32l-.083-.094-3-3a1 1 0 0 0-1.32-.083l-.094.083-1.293 1.292zm5.677-1.877a1 1 0 0 1 .083 1.32l-.083.094-3 3a1 1 0 0 1-1.32.083l-.094-.083-2-2a1 1 0 0 1 1.32-1.497l.094.083L9 12.585l2.793-2.792a1 1 0 0 1 1.32-.083z",
    color: "primary"
  },
  {
    title: "简洁易用的代码生成功能",
    description: "内置极易上手的代码生成器，支持单表、父子表等场景的代码生成。使你的编码效率大大提高",
    icon: "M19 9l-7 7-7-7m14-5l-7 7-7-7",
    color: "primary"
  },
  {
    title: "超强的自定义权限",
    description: "提供灵活易用的自定义权限，精细到模块、按钮、API、甚至每个字段维度。",
    icon: "M12 1v2m0 18v2M4.2 4.2l1.4 1.4m12.8 12.8 1.4 1.4M1 12h2m18 0h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4M5 12a7 7 0 1 1 14 0 7 7 0 0 1-14 0z",
    color: "primary"
  },
  {
    title: "动态表单设计",
    description: "支持拖拽组件，快速构建表单，无需编写代码，即可实现表单设计",
    icon: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM8 15h8v2H8zm0-4h8v2H8zm0-4h8v2H8zm-2 0h1v1H6zm0 4h1v1H6zm0 4h1v1H6z",
    color: "primary"
  },
  {
    title: "可视化流程设计",
    description: "通过可视化流程设计器，快速构建流程，无需编写代码，即可实现流程设计",
    icon: "M13 5c0 1.1.9 2 2 2h3.59l-9.83 9.83-3.53-3.53c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.24 4.24c.39.39 1.02.39 1.41 0L21.41 7H15c-1.1 0-2-.9-2-2s.9-2 2-2h6v6c0 1.1-.9 2-2 2s-2-.9-2-2V5",
    color: "primary"
  },
  {
    title: "全网最好用的打印解决方案",
    description: "提供灵活无代码（可能需要写SQL）的打印解决方案，无需开发人员参与即可配置自己需要的打印。",
    icon: "M6 17h12V12H6v5zm0-11v4h12V6H6zm15-2a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h18zM4 14h2v2H4v-2zm0-3h2v2H4v-2z",
    color: "primary"
  },
  {
    title: "基于Quartz.Net的定时任务",
    description: "无需开发人员参与即可配置自己需要的定时任务。可随时启/停，可视化配置Cron表达式功能",
    icon: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm0-15v5l3 3",
    color: "primary"
  },
  {
    title: "多租户",
    description: "支持多租户，轻松管理多个客户的数据。",
    icon: "M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6zm3 0v12h14V6H6zm2 2h10v2H8V8zm0 4h10v2H8v-2zm0 4h5v2H8v-2z",
    color: "primary"
  },
  {
    title: "支持多种数据库类型",
    description: "支持sqlserver、mysql、Oracle、PostgreSql数据库，理论上支持所有数据库",
    icon: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4",
    color: "primary"
  },
  {
    title: "多ORM支持",
    description: "同时支持EntityFramework、SqlSugar两款最流行的ORM框架",
    icon: "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4",
    color: "primary"
  },
  {
    title: "搭建自己的OAuth服务器",
    description: "不同于其他项目的统一登录（如微信支付宝登录等）,OpenAuth.Net的统一登录指的是自己搭建一套OAuth登录服务，提供给其他项目使用。",
    icon: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z",
    color: "primary"
  }
];
---

<section id="features" class="py-8 bg-gray-50 dark:bg-gray-800/50">
  <div class="container-custom">
   
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
      {features.map((feature, index) => (
        <div 
          class="card p-6 border border-gray-200 dark:border-gray-700 slide-up" 
          style={`animation-delay: ${index * 100}ms`}
        >
          <div class={`w-12 h-12 rounded-lg bg-${feature.color}-100 dark:bg-${feature.color}-900/30 flex items-center justify-center mb-6`}>
            <svg 
              class={`w-6 h-6 text-${feature.color}-600 dark:text-${feature.color}-400`} 
              fill="none" 
              stroke="currentColor" 
              viewBox="0 0 24 24" 
              xmlns="http://www.w3.org/2000/svg"
            >
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={feature.icon}></path>
            </svg>
          </div>
          <h3 class="text-xl font-semibold mb-3 text-gray-900 dark:text-white">{feature.title}</h3>
          <p class="text-gray-600 dark:text-gray-300">{feature.description}</p>
        </div>
      ))}
    </div>
    
    <div class="mt-16 text-center">
      <a href="/case-study" class="btn-primary">
        看看实际效果
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
  </div>
</section>
